<template>
    <div class="serach">
        <div class="serach-title">
            <div class="form">
                <form action="/">
                <van-search
                    ref="input"
                    v-model="value"
                    show-action
                    :placeholder='placeholder'
                    shape='round'
                    @input="input(value)"
                    @search="search(value)"
                    @cancel="clear"
                    @blur="blur($event)"
                />
                </form>
            </div>
            <!-- 搜索 -->
            <div :class="selectContainer.length>10?'serach-container auto':'serach-container'">
                <div v-show="isSearch===true" v-for="(item,index) in selectContainer" :key="index" @click="search(item.name)" class="form-container">
                    <van-icon class="search1" name="search" />
                    <div class="from-container-div auto-text" v-html="item.name">{{item.name}}</div>
                </div>
            </div>
        </div>
        <!-- 历史记录 -->
        <div class="serach-history">
            <div class="history-title">
                <div class="history-title-left">搜索历史</div>
                <div @click="delet" v-if="selectHistory.length>0" class="history-title-right"><van-icon v-show="isSearch===false" name="delete-o" /></div>
            </div>
            <div class="history-container">
                <div @click="search(item.title)" class="history-container-div" v-for="(item,index) in selectHistory" :key="index">{{item.title}}</div>
            </div>
        </div>
        <!-- 热门 -->
        <div class="serach-hot">
            <div class="hot-title">热门搜索</div>
            <div class="hot-container">
                <div class="hot-container-div" @click="goToCartoon(item.season_id)" v-for="(item,index) in hotSelectData" :key="index">
                    <div class="hot-number">
                        <span :style="index===0?color[index]:index===1?color[index]:index===2?color[index]:''">{{index+1}}</span>
                    </div>
                    <div class="hot-container-img">
                        <div class="hot-img">
                            <img :src="item.vertical_cover" alt="">
                        </div>

                    </div>
                    <div class="hot-div-title auto-text">
                            <div class="auto-text">{{item.title}}</div>
                            <div class="ziti">{{item.styles[0]}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    export default {
        name:"Search",
        data(){
            return{
                // 是否显示搜索
                isSearch:false,
                // 关键字
                placeholder:'',
                // 搜索内容
                value: '',
                // 背景颜色
                color:[
                    {
                        color:'#E65D60'
                    },
                    {
                        color:'#DD8847'
                    },{
                        color:'#F2A813'
                    }
                ],
                // 搜索历史
                selectHistory:[],
                // 热门搜索内容
                hotSelectData:[],
                // 搜索内容
                selectContainer:[]
            }
        },
        created(){
            this.placeholder = this.$route.query.title
            // 获取本地存储的搜索历史
            this.selectHistory = localStorage.getItem("searchHistory");
            if (!this.selectHistory) {
                this.selectHistory = [];
            } else {
                this.selectHistory = JSON.parse(this.selectHistory);
            };

            // // 获取热门内容
            this.getHot()
        },
        mounted(){
            document.querySelector(".van-field__control").focus()
        },
        methods:{
            // 删除
            delet(){
                this.$dialog.confirm({
                    message: '确定删除吗?',
                    })
                    .then(() => {
                        this.selectHistory = '';
                        localStorage.removeItem("searchHistory")
                    }).catch(err=>{
                        // 
                    })
            },
            // 输入内容改变的时候
            input(value){
                // 发起请求
                if(value != ''){
                    this.axios({
                        methods:'GET',
                        url:'https://apis.netstart.cn/bcomic/SearchSug',
                        params:{
                            term:value
                    }
                    }).then(res=>{
                        let arr = [];
                        if(res.status === 200){
                            for(let i = 0 ; i < res.data.data.length; i++){
                                let obj = {
                                    name:res.data.data[i]
                                }
                                arr.push(obj)
                            }
                            this.selectContainer = arr;
                        }
                    })
                    
                    this.isSearch = true;
                }else if(value === ''){
                    
                    this.isSearch = false;
                }
            },
            // 失去焦点
            blur(e){
                if(e.target.className !== 'form-container' || e.target.className !== 'search1'){
                    setTimeout(()=>{
                        this.isSearch = false;
                        this.selectContainer = [];
                    },10)
                }
            },
            // 取消
            clear(){
               this.$router.go(-1);
                this.isSearch = false;
            },
            // // 点击搜索内容
            // cahngeText(value){
            //     let value1 = this.reg(value);
            //     
            //     this.isSearch = false;
               
            //     // this.$router.push({name:"SearchContainer",query:{name:value1}})

            // },
            // 搜索
            search(value){
                let value1 = '';
                if(value.indexOf("<") != -1){
                    value1 = this.reg(value);
                }else{
                    value1 = value;
                }
                
                // 输入关键字
                if(value1 === ''){
                    value1 = this.placeholder
                }
                this.$router.push({name:"SearchContainer",query:{name:value1}})
                for (var i = 0; i < this.selectHistory.length; i++) {
                    if (this.selectHistory[i].title === value1) {
                        this.selectHistory.splice(i,1);
                        this.selectHistory.unshift({title:value1})
                        localStorage.setItem('searchHistory', JSON.stringify(this.selectHistory));
                        return;
                    }
                }
                // 判断搜索历史关键字是否超出是个，移除第一个
                if (this.selectHistory.length === 10) {
                    this.selectHistory.pop();
                }
                this.selectHistory.unshift({title:value1});
                localStorage.setItem('searchHistory', JSON.stringify(this.selectHistory));
                this.value = '';
                this.isSearch = false;
                
            },

            // 热门搜索
            getHot(){
                this.axios({
                    methods:'GET',
                    url:'SearchRecommend',
                    params:{
                        num: 6,
                    }
                }).then(result=>{
                    if(result.status === 200){
                        this.hotSelectData = result.data.data;
                    }
                }).catch(err=>{
                    
                })
            },

            // 正则
            reg(value){
                let reg = /<em class="keyword">|<\/em>/g;
                return value.replace(reg,'');
            },

            // 跳转漫画详情页
            goToCartoon(item){
                
                this.$router.push({name:"CartoonContainer",query:{id:item}})
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/.keyword{
    font-style:normal;
    color: #33AAFA;
}

.search1{
    font-size: 20px;
    padding-left: 10px;
}
/deep/.van-icon-delete-o{
    font-size: 16px;
    color: #76777B;
}
.ziti{
    color: #A2A1A6;
}
.auto{
    height: calc(100vh - 54px);
    overflow-y: auto;
}
.serach{
    .serach-title{
        position: relative;
        border-bottom: 1px solid #EAEAEA;
        .serach-container{
            position: absolute;
            width: 100%;
            .form-container{
                display: flex;
                padding: 10px 0px 10px 12px;
                border-bottom: 1px solid #EAEAEA;
                background-color: #FEFEFE;
                .from-container-div{
                    padding-left: 10px;
                }
            }
        }
    }
    .serach-history{
        padding: 10px;
        .history-title{
            color: #A2A1A6;
            padding: 10px;
            display: flex;
            .history-title-right{
                margin-left: auto;
            }
        }
        .history-container{
            display: flex;
            flex-wrap: wrap;
            .history-container-div{
                padding: 8px 10px;
                font-size: 13px;
                background-color: #F1F1F3;
                margin-left: 5px;
                margin-bottom: 5px;
                border-radius: 5px;
            }
        }
    }
    .serach-hot{
        padding: 10px;
        .hot-title{
            color: #A2A1A6;
            padding-left: 10px;
        }
        .hot-container{
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            margin-top: 10px;
            .hot-container-div{
                display: flex;
                width: 50%;
                margin-bottom: 10px;
                .hot-number{
                    height: 100%;
                    font-size: 20px;
                    line-height: 50px;
                    padding-left: 5px;
                    font-weight: 700;
                    color: #BABABA;
                }
                .hot-container-img{
                    display: flex;
                    padding-left: 5px;
                    .hot-img{
                        background-color: #A2A1A6;
                        // height: 70px;
                        height: 50px;
                        border-radius: 2px;
                        >img{
                            height: 100%;
                            border-radius: 2px;
                            overflow: hidden;
                            display: block;
                        }
                    }
                }
                .hot-div-title{
                    padding-left: 8px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly
                }
            }
        }
    }
}
</style>